// 轮播图/幻灯片组件
import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';

import { withRouter } from 'react-router-dom'

// 引入图片（这是固定写法-后面会用网络请求的图片
import swiper1 from '@/assets/images/swiper-1.png'
import swiper2 from '@/assets/images/swiper-2.png'
import swiper3 from '@/assets/images/swiper-3.png'

import connect from './connect'

@connect
@withRouter
class Swiper extends Component {

    state = {
        data: [swiper1, swiper2, swiper3],
        imgHeight: 176,
    }

    componentDidMount() {
        // 调用action函数
        this.props.initSwiper()
    }

    render() {
        return (
            <Carousel
                autoplay={false}
                infinite={true}
            >
                {this.state.data.map((val, index) => (

                    <img
                        key={'swiper-' + index}
                        src={val}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        // 搭配withRouter高阶组件得到路由对象
                        onClick={() => {
                            console.log(this.props.history)
                        }}
                    />
                ))}
            </Carousel>
        );
    }
}

export default Swiper;
